<template>
    <div>
        <h1>mabc</h1>
        <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
    <el-table-column
      prop="abc"
      label="奖学金申请状况"
      >
    </el-table-column>
  </el-table>

  <!-- 尝试 -->
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
    <el-table-column
      prop="date"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="年龄"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="邮箱">
    </el-table-column>
    <el-table-column
      prop="abc"
      label="年级"
      >
    </el-table-column>
  </el-table>
  <hr>
    <div class="flex-container">

        <el-button type="primary" round style="margin-left: 20px;" @click="dialogVisible = true">主要按钮</el-button>
        <el-dialog
      title="申请表格"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">提 交</el-button>
      </span>
    </el-dialog>
        
    </div>
 
    </div>
</template>

<script>
import Axios from 'axios';
  export default {
    data() {
      return {
        // 弹框组件功能块：
        dialogVisible: false,
        // 弹框组件
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          tag: '家',
          abc: {}
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          tag: '公司'
        }],
      }
    },
    methods: {
      indexMethod(index) {
        return index * 2;
      },
    //   弹框组件
      handleClose(done){
        this.$confirm('确认关闭？')
        .then(_ => {
            done();
        })
        .catch(_ => {})
      },
      
    //   弹框组件
    },
    created:function(){
        Axios.get("http://localhost:9000/user")
        .then(Response => {
            this.tableData[2].abc=Response.data.email
        })
    }
  };
</script>
<style>
.move-right {
  margin-left: 20px;
}
</style>